<template>
    <!-- 我们一般用class来设定样式 -->
    <div class="student">
        <!-- html标签要想使用vue定义的属性，需要使用插值语法{{  }}就是两队大括号 -->
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <!-- @是动态绑定，其实是v-modevl属性的缩写 -->
        <!-- 我们通过动态绑定 为这个按钮的点击事件(click)绑定了一个函数叫showTel，也就是一点击就执行showTel函数 -->
        <button @click="showTel">点我显示联系电话</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Student',
    //setup函数，在setup函数里面写的代码基本类似于JavaScript 其实是TypeScript
    setup() {

        let name = '学生张三';

        let age = 666;
        let tel = 13636363366;
        function showTel() {
            alert(tel);
        }
        // setup返回值
        return { name, age, tel, showTel }
    }
}
</script>

<style scoped>
    .student {
        background-color: aquamarine;
        /*背景颜色 */
        padding: 30px;
        /*内边距 */
        box-shadow: 0 0 10px;
        /*边框阴影 */
        border-radius: 10px;
    }

    /* 标签选择器 */
    button {
        margin:  10px;
    }
</style>
